<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>专业域名邮箱发送系统</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', system-ui; }
        body { background: #f7f9fc; color: #333; line-height: 1.6; }
        
        /* 顶部导航栏 */
        .top-bar {
            position: fixed;
            top: 0; left: 0;
            width: 100%;
            height: 60px;
            background: white;
            box-shadow: 0 2px 12px rgba(0,0,0,0.08);
            display: flex;
            align-items: center;
            padding: 0 20px;
            z-index: 100;
        }
        .back-button {
            width: 36px;
            height: 36px;
            background: #000;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .back-button:hover { transform: scale(1.05); background: #333; }
        .back-arrow {
            width: 14px;
            height: 14px;
            border-top: 2px solid white;
            border-left: 2px solid white;
            transform: rotate(-45deg);
        }
        .title {
            margin-left: 16px;
            font-size: 18px;
            font-weight: 600;
            color: #2d3748;
        }
        
        /* 内容区域 */
        .container {
            max-width: 600px;
            margin: 80px auto 30px;
            padding: 28px;
            background: white;
            border-radius: 16px;
            box-shadow: 0 6px 24px rgba(0,0,0,0.05);
        }
        .form-group { margin-bottom: 22px; }
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            font-size: 14px;
            color: #4a5568;
        }
        .form-control {
            width: 100%;
            padding: 14px;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            font-size: 15px;
            transition: all 0.3s;
        }
        .form-control:focus {
            outline: none;
            border-color: #4299e1;
            box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.15);
        }
        textarea.form-control {
            min-height: 180px;
            resize: vertical;
        }
        .send-btn {
            display: block;
            width: 100%;
            padding: 16px;
            background: #4299e1;
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.3s;
        }
        .send-btn:hover { background: #3182ce; }
        .send-btn:active { transform: translateY(2px); }
        
        /* 状态提示 */
        .status {
            padding: 16px;
            border-radius: 10px;
            margin: 22px 0;
            text-align: center;
            display: none;
        }
        .status.success {
            background: #f0fff4;
            color: #2f855a;
            border: 1px solid #c6f6d5;
        }
        .status.error {
            background: #fff5f5;
            color: #c53030;
            border: 1px solid #fed7d7;
        }
        
        /* 响应式优化 */
        @media (max-width: 640px) {
            .container { margin: 70px 15px 30px; padding: 20px; }
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-bar">
        <div class="back-button" onclick="history.back()">
            <div class="back-arrow"></div>
        </div>
        <div class="title">域名邮箱发送系统</div>
    </div>
    
    <!-- 邮件发送表单 -->
    <div class="container">
        <div class="form-group">
            <label for="recipient">收件人邮箱</label>
            <input type="email" id="recipient" class="form-control" placeholder="name@example.com" required>
        </div>
        
        <div class="form-group">
            <label for="subject">邮件主题</label>
            <input type="text" id="subject" class="form-control" placeholder="重要通知..." required>
        </div>
        
        <div class="form-group">
            <label for="message">邮件内容</label>
            <textarea id="message" class="form-control" placeholder="请输入邮件正文..." required></textarea>
        </div>
        
        <button id="sendButton" class="send-btn">发送邮件</button>
        
        <div id="statusMessage" class="status"></div>
    </div>

    <script>
        document.getElementById('sendButton').addEventListener('click', function() {
            const recipient = document.getElementById('recipient').value;
            const subject = document.getElementById('subject').value;
            const message = document.getElementById('message').value;
            const statusEl = document.getElementById('statusMessage');
            
            // 简单验证
            if (!validateEmail(recipient)) {
                showStatus('请输入有效的邮箱地址', 'error');
                return;
            }
            if (message.trim() === '') {
                showStatus('邮件内容不能为空', 'error');
                return;
            }
            
            showStatus('邮件发送中，请稍候...', 'processing');
            
            // 使用AJAX发送到PHP后端
            const formData = new FormData();
            formData.append('recipient', recipient);
            formData.append('subject', subject);
            formData.append('message', message);
            
            fetch('send_mail.php', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showStatus(`邮件发送成功至：${recipient}`, 'success');
                    // 清空表单
                    document.getElementById('recipient').value = '';
                    document.getElementById('subject').value = '';
                    document.getElementById('message').value = '';
                } else {
                    showStatus(`发送失败：${data.message}`, 'error');
                }
            })
            .catch(error => {
                showStatus(`网络错误：${error.message}`, 'error');
            });
        });
        
        // 邮箱格式验证
        function validateEmail(email) {
            const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            return re.test(email);
        }
        
        // 显示状态信息
        function showStatus(message, type) {
            const statusEl = document.getElementById('statusMessage');
            statusEl.textContent = message;
            statusEl.className = 'status ' + (type === 'success' ? 'success' : type === 'error' ? 'error' : '');
            statusEl.style.display = 'block';
            
            // 5秒后自动隐藏
            if (type !== 'processing') {
                setTimeout(() => {
                    statusEl.style.display = 'none';
                }, 5000);
            }
        }
    </script>
</body>
</html>